<template>
	<div :class="[liveLinksBoxClass]">
		<ul class="ul-box">
			<li v-for="(v,i) in imgArraryData" @click="clickImg(v.imgLink)" :key="i">
				<img :src="v.img + '?x-oss-process=image/resize,m_fixed,h_196,w_346'" />
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			noNavLength: String, //noNav  没有nav
			roomInfo: Object,
		},
		data() {
			return {
				videoId: this.$route.params.id, //回看传过来的id
				liveLinksBoxClass: '',
				imgArraryData: [],
				getPlatform: fun.getPlatform(), //app wx
			}
		},
		created() {
			if (this.noNavLength == 'noNav') {
				this.liveLinksBoxClass = 'no-nav'
			} else {
				this.liveLinksBoxClass = 'live-links-box';
			};
			this.getTuWenDataImg();
		},
		mounted() {},
		methods: {
			// 获取图片列表
			getTuWenDataImg() {
				this.$http.get('/h5live/vod/getImgLinkList?vid=' + this.videoId).then((res) => {
					const {
						code,
						data
					} = res.data
					if (code == '000000') {
						this.imgArraryData = data;
					}
				}, (err) => {
					console.log(err);
				})
			},
			clickImg(imglink) {
				if (imglink) {
					const item = {
						'link':imglink,
						'linkType':1
					}
					fun.linkUrlFloatVideo(item);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.live-links-box {
		width: 100%;
		flex: 1;
	}

	.no-nav {
		width: 100%;
		height: calc(100vh - 494px);
	}


	.ul-box {
		width: 100%;
		height: 100%;
		padding: 0 2.5%;
		font-size: 0;
		float: left;
		overflow-y: scroll;
	}

	.ul-box li {
		width: 48.6%;
		margin-top: 22px;
		box-sizing: border-box;
		float: left;
	}

	.ul-box li:nth-of-type(odd) {
		margin-right: 18px;
	}

	.ul-box li img {
		width: 100%;
		height: 196px;
		border-radius: 10px;
	}
</style>
